<script setup>
  import tabbarData from '@/assets/data/tabbar.js'
  import { getAssetURL } from '@/utils/load_assets.js'
  import { ref, watch } from 'vue'
  import { useRoute } from 'vue-router'

  const currentIndex = ref()

  const route = useRoute()
  watch(route, (newRoute) => {
    // 解决方法 1：
    // currentName.value = newRoute.name
    // 解决方法 2：
    // Array.findIndex() 返回第一个满足条件的数组元素的索引值，查找失败返回 -1
    const index = tabbarData.findIndex(item => item.path === newRoute.path)
    if(index === -1) return
    currentIndex.value = index
  })
</script>

<template>
  <div class="tab-bar">
    <!--
      bug：在地址栏手动更改路由时, van-tabbar 组件的 v-model 绑定的属性值没有改变
      原因：在地址栏手动更改路由时，不会触发事件，所以 currentIndex 的值没有发生改变
        默认情况下，只有点击 tabbar-item 元素时，currentIndex 的值才会发生改变,
      解决方法 1：为 van-tabbar-item 添加唯一的name，该 name 与 van-tabbar-item 设置
      的路由对象的 name 一一对应，然后侦听 route 对象的变化，执行相应的操作
      解决方法 2：侦听 route 对象的变化，根据 path 属性查找对应的 tabs 数据，获取其索引值，
      然后将其赋值给 vant-tabbar 的 v-model 绑定的属性值
    -->
    <!-- <van-tabbar v-model="currentName" active-color="#ff9854" route> -->
    <!-- 解决方法 1： -->
    <!-- <van-tabbar-item :to="item.path" :name="item.name"
      :icon="currentName === item.name ? getAssetURL(item.imageActive) : getAssetURL(item.image)" v-for="(item) in tabbarData">
       <span>{{ item.text }}</span>
       <template #icon>
         <img v-if="currentName !== item.name" :src="getAssetURL(item.image)" alt="">
         <img v-else :src="getAssetURL(item.imageActive)" alt="">
       </template>
      </van-tabbar-item> -->

    <!-- 解决方法 2： -->
    <van-tabbar v-model="currentIndex" active-color="#ff9854" route>
      <van-tabbar-item :to="item.path"
        :icon="currentIndex === index ? getAssetURL(item.imageActive) : getAssetURL(item.image)"
        v-for="(item, index) in tabbarData">
        <span>{{ item.text }}</span>
        <template #icon>
          <img v-if="currentIndex !== index" :src="getAssetURL(item.image)" alt="">
          <img v-else :src="getAssetURL(item.imageActive)" alt="">
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style lang="less">
.tab-bar {
  // 局部定义一个变量：只针对.tab-bar子元素才生效
  --van-tabbar-item-icon-size: 26px;

  .active {
    color: var(--primary-color);
  }

  img {
    height: 22px;
  }

}
</style>